<template>
  <div class="app">
    <MyHeader>tab-bar</MyHeader>
    <keep-alive><component :is="activeTab"></component></keep-alive>
    <MyTabBar :tabList="tabList" v-model="active"></MyTabBar>
  </div>
</template>

<script>
import MyHeader from './components/MyHeader'
import MyTabBar from './components/MyTabBar'
import GoodsList from './views/GoodsList'
import GoodsSearch from './views/GoodsSearch'
import User from './views/User'
export default {
  components: {
    MyHeader,
    MyTabBar,
    GoodsList,
    GoodsSearch,
    User,
  },
  data() {
    return {
      tabList: [
        {
          icon: 'icon-shangpinliebiao',
          title: '商品列表',
          tabName: 'GoodsList',
        },
        { icon: 'icon-sousuo', title: '商品搜索', tabName: 'GoodsSearch' },
        { icon: 'icon-user', title: '用户中心', tabName: 'User' },
      ],
      active: 0,
    }
  },
  computed: {
    activeTab() {
      return this.tabList[this.active].tabName
    },
  },
}
</script>

<style scoped>
.app {
  padding: 50px 0;
}
</style>
